<template>
  <div class="home-contarner">
    <div class="list-left">
      <el-menu 
      router
      :default-active="curselected"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened>
      <div class="home-title">
        <img src="../assets/imgs/u=624598583,2914472962&fm=26&gp=0.jpg" width=40px height=40px>
         <h3>外卖商家中心</h3>
      </div>
      <div v-for="(item,index) in accountAuthority" :key="index">
          <!-- 父亲 -->
          <el-submenu v-if="item.children" :index="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.name}}</span>
            </template>
              <!-- 儿子 -->
            <el-menu-item-group v-for="(child,i) in item.children" :key="i">
              <el-menu-item :index="child.childindex">{{child.childname}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>


          <el-menu-item v-else :index="item.index">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
          </el-menu-item>
      </div>
    </el-menu>
    
    </div>
    <div class="list-right">
      <router-view />
    </div>
  </div>
</template>

<script>
  import {verificationToken} from "@//apis/api"
export default {
  data(){
    return{
      curselected:"/home",
      homelist:[
        {index:"/home",icon:"el-icon-s-home",name:"后台首页",to:"/home",jurisdiction:["super","normal"]},
        {index:"/home/ordermanagement",icon:"el-icon-s-order",name:"订单管理",to:"/home/ordermanagement",jurisdiction:["super","normal"]},
        {index:"3",icon:"el-icon-s-cooperation",name:"商品管理",children:[
          {childindex:"/home/commoditylist",childname:"商品列表",childto:"/home/commoditylist"},
          {childindex:"/home/addcommodity",childname:"商品添加",childto:"/home/addcommodity"},
          {childindex:"/home/commodityclassification",childname:"商品分类",childto:"/home/commodityclassification"},
          ],jurisdiction:["super","normal"]},
        {index:"/home/storemanagemen",icon:"el-icon-s-shop",name:"店铺管理",to:"/home/storemanagemen",jurisdiction:["super"]},
        {index:"5",icon:"el-icon-user-solid",name:"账号管理",children:[
          {childindex:"/home/accountlist",childname:"账号列表",childto:"/home/accountlist"},
          {childindex:"/home/addaccount",childname:"添加账号",childto:"/home/addaccount"},
          {childindex:"/home/changepassword",childname:"修改密码",childto:"/home/changepassword"},
          ],jurisdiction:["super"]},
        {index:"6",icon:"el-icon-picture-outline-round",name:"销售统计",children:[
          {childindex:"/home/commoditystatistics",childname:"商品统计",childto:"/home/commoditystatistics"},
          {childindex:"/home/orderstatistics",childname:"订单统计",childto:"/home/orderstatistics"},
          ],jurisdiction:["super"]},
      ],
    }
  },
    components:{
      
    },
    methods: {
    },
    computed:{
      //账号权限
      accountAuthority(){
        return this.homelist.filter(v=>v.jurisdiction.includes(localStorage.role) )}
    },
    created(){
      this.curselected=location.hash.slice(location.hash.indexOf("/"))
      
      //token默认时长
       verificationToken({token:localStorage.token})
      .then(res=>{
          // console.log(res.data)
          if(res.data.code==1){
              this.$router.push("@/views/Login")
          }
      })
      
    }
     
}
</script>
<style lang=less scoped>
.home-contarner{
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    display:flex;
  }
  .list-left{
    width:200px;
    background-color:gray;
    a{
        color:#fff;
        text-decoration: none;
      }
    .home-title{
      text-align: center;
      line-height: 40px;
      margin-top:10px;
      font-weight: 600;
      color:#fff;
      display: flex;
      img{
        margin-left:20px;
        border-radius: 50%;
      }
    }
  }
  .el-menu-vertical-demo{
    width:200px;
  }
  .list-right{
    flex:1;
    background-color:#eee;
  }

</style>
